<template>
    <div style="overflow-y: scroll; overflow-x: hidden; height: 100vh">
        <div style="width: 90%; margin: 20px auto 0" ref="printContent">
            <div style="overflow: hidden; width: 100%">
                <el-button type="primary" size="small" style="float: right" v-print="printObj">打印</el-button>
            </div>
            <!-- padding: 10px 30px; -->
            <div style="max-width: 100%" id="print-content">
                <table class="table-1">
                    <tr>
                        <td colspan="4" style="font-weight: 700; padding: 6px; font-size: 14px">其他合同</td>
                    </tr>
                    <template v-for="(adlistitem, index) in projectdetail.buildList">
                        <tr style="background-color: #f6eed9">
                            <td style="text-align: center; width: 20%">房屋地址:</td>
                            <td colspan="3">
                                {{ adlistitem.fwdz }}
                            </td>
                        </tr>
                    </template>
                    <tr>
                        <td style="text-align: center; color: #000;width: 20%">合同名称:</td>
                        <td style="width: 40%">
                            {{ projectdetail.htmc }}
                        </td>
                        <td style="text-align: center; color: #000;width: 20%">合同类型:</td>
                        <td style="width: 40%">
                            {{ projectdetail.htlx }}
                        </td>
                    </tr>
                    <tr style="background-color: #f5fafa">
                        <td style="text-align: center; color: #000;width: 20%">甲方:</td>
                        <td colspan="3">
                            {{ projectdetail.jf }}
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: center; color: #000;width: 20%">乙方:</td>
                        <td colspan="3">
                            {{ projectdetail.yf }}
                        </td>
                    </tr>
                    <tr style="background-color: #f5fafa">
                        <td style="text-align: center; color: #000;width: 20%">丙方:</td>
                        <td colspan="3">
                            {{ projectdetail.bf }}
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: center; color: #000;width: 20%">收支情况:</td>
                        <td style="width: 40%">
                            {{ projectdetail.szqk }}
                        </td>
                        <td style="text-align: center; color: #000;width: 20%" v-if="projectdetail.szqk != '无'">合同金额:</td>
                        <td v-if="projectdetail.szqk != '无'" style="width: 40%">
                            {{ projectdetail.htje }}
                        </td>
                    </tr>
                    <tr style="background-color: #f5fafa">
                        <td style="text-align: center; color: #000;width: 20%">合同起始时间:</td>
                        <td style="width: 40%">
                            {{ projectdetail.htqssj ? projectdetail.htqssj.split(' ')[0] : '' }}
                        </td>
                        <td style="text-align: center; color: #000;width: 20%">合同到期时间:</td>
                        <td style="width: 40%">
                            {{ projectdetail.htdqsj ? projectdetail.htdqsj.split(' ')[0] : '' }}
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: center; color: #000;width: 20%">合同签订时间:</td>
                        <td style="width: 40%">
                            {{ projectdetail.htqdsj ? projectdetail.htqdsj.split(' ')[0] : '' }}
                        </td>
                        <td style="text-align: center; color: #000;width: 20%">中心党委会纪要编号:</td>
                        <td style="width: 40%">
                            {{ projectdetail.jybh }}
                        </td>
                    </tr>
                    <!-- <tr style="background-color: #f5fafa" v-if="projectdetail.htje > 6000">
                        <td colspan="3">
                            <el-table :data="yjhttableData" style="width: 100%;" border>
                                <el-table-column prop="name" label="文件名称" align="center"> </el-table-column>
                            </el-table>
                        </td>
                    </tr> -->
                    <tr style="background-color: #f5fafa">
                        <td style="text-align: center; color: #000;width: 20%">办件事由:</td>
                        <td colspan="3">
                            {{ projectdetail.bjsy }}
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4" style="font-weight: 700">文件</td>
                    </tr>
                    <tr>
                        <td style="font-weight: 700">文件类型</td>
                        <td style="font-weight: 700">文件名称</td>
                        <td style="font-weight: 700">是否需要盖章</td>
                        <td style="font-weight: 700">盖章类型</td>
                        <!-- <td style="font-weight: 700">文件名称</td> -->
                    </tr>
                    <tr v-for="(fileitem, index) in filetable" :key="index">
                        <td>{{ fileitem.yjlx }}</td>
                        <td>{{ fileitem.wjmc }}</td>
                        <td>{{ fileitem.sfgz }}</td>
                        <td>{{ fileitem.gzlx }}</td>
                        <!-- <td>{{ fileitem.yjbz }}</td> -->
                    </tr>
                    <tr>
                        <td colspan="4" style="font-weight: 700">审批意见</td>
                    </tr>
                    <tr v-for="(item, index) in tableData" :key="index">
                        <td style="text-align: center;width: 20%">{{ item.spyjmc }}:</td>
                        <td colspan="3">
                            {{ item.spyj }}
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
import print from 'vue-print-nb';
import { dydetails } from '@/api/index';

export default {
    data: function () {
        return {
            printObj: {
                id: 'print-content'
                // popTitle: '测试表单', // 如果不设置 默认是没有值即 undifined
            },
            gdform: {},
            projectdetail: {},
            tableData: [],
            fileform: {},
            form: {},
            filetable: [],
            yjhttableData: []
        };
    },
    directives: {
        print
    },
    methods: {
        dydetails(data) {
            dydetails(data).then((res) => {
                console.log('res', res);
                this.projectdetail = res.data.processtableInfo; //基础数据
                // this.yjhttableData=this.projectdetail.cgsqdwj
                this.filetable = res.data.fileList; //文件数据
                this.tableData = res.data.spyjList; //审批意见
            });
        }
    },
    mounted() {
        let data = {
            id: this.$route.query.id
        };
        this.dydetails(data);
    }
};
</script>

<style scoped>
/* @page {
    size: A4;
    margin: 0mm;
} */
</style>
<style>
@media print {
    @page {
        size: A4;
        margin: 8mm 20mm 4mm;
    }
    body,
    html,
    div {
        height: auto !important;
    }
    body {
        width: 100%;
        /* zoom:75% */
    }
}
table {
    width: 100%;
    margin: auto;
    text-align: center;
}

.table-1 {
    border: 1px solid #abacae;
    border-collapse: collapse;
    /*合并相邻表格的间距*/
}

.table-1 tr,
.table-1 td {
    font-size: 13px;
    border-collapse: collapse;
    border: 1px solid #abacae;
    /* padding: 4px; */
    box-sizing: border-box;
    color: #000000;
}
</style>